<template>
    <div>
        <div class="w">
            <t-header></t-header>

            <div class="song-sheet">
                <span>歌单</span>
                <a
                :key="index"
                @click="showSongSheetInfo(item.name)"
                :class="item.name == songSheetID ? 'current-style' : ''"
                v-for="(item, index) in songSheetList"
                >{{item.name}}</a>
            </div>

            <!-- 歌单列表 -->
            <songsheet-list :songSheetInfo="songSheetInfo"></songsheet-list>



        </div>

        <t-footer></t-footer>
    </div>
</template>

<script>
import Header from '../components/Header'
import Footer from '../components/Footer'
import SongSheetList from '../components/SongSheetList'
export default {
    components: {
        't-header': Header,
        't-footer': Footer,
        'songsheet-list': SongSheetList
    },
    data() {
        return {
            // 歌单分类
            songSheetList: [],
            // 当前歌单的ID
            songSheetID: '华语',
            // 歌单详情
            songSheetInfo: []
        }
    },
    mounted() {
        this.getSongSheet();
        this.showSongSheetInfo(this.songSheetID);
    },
    methods: {
        // 获取歌单分类
        async getSongSheet() {
            let { data: res } = await this.$http.get('/playlist/hot');
            this.songSheetList = res.tags;
        },
        // 显示歌单分类的详情
        async showSongSheetInfo(id) {
            this.songSheetID = id;
            // 获取歌单详情
            let { data: res } = await this.$http.get('/top/playlist/highquality', { params: { cat: id, limit: 20 } });
            this.songSheetInfo = res.playlists;
        }
    }
}
</script>

<style lang="less" scoped>
.w {
    padding: 0 50px;
}

.song-sheet {
    margin-top: 50px;
    span {
        font-size: 26px;
        color: #4a4a4a;
        margin-right: 30px;
    }
    a {
        color: #964a4a;
        display: inline-block;
        margin: 0 20px;
        cursor: pointer;
    }
    .current-style {
        border-bottom: 2px solid #4a4a4a;
    }
}
</style>